<template>
  <section class="v-slider">
    <el-slider
      v-model="value"
      :disabled="disabled"
      :max="max"
      :min="min"
      :step="step"
      :format-tooltip="formatTooltip"
      @input="handleChange"
    />
  </section>
</template>
<script>
import mixins from './../mixins'

export default {
  name: 'VSlider',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  computed: {
    step() {
      return this.option.step || 1
    },
    // 单位，如果是宽高、大小 需要标注单位的默认是px; 如果是单纯的数字，则传'number'
    unit() {
      return this.option.unit ?? 'px'
    }
  },
  mounted() {
    if (this.option.override !== undefined) {
      this.option.override(this, this.value)
    }
    this.dispatch_event('filed-value-change', this.value)
  },
  methods: {
    formatTooltip(val) {
      if (this.unit === 'number') {
        return val
      } else {
        return val + this.unit
      }
    },
    getValue() {
      return this.value
    },

    setValue(v) {
      this.$set(this, 'value', v)
    },

    setCheck() {
      let { value, required } = this
      let error = false
      let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange(e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
